<template>
  <div class="material-container app-main-content-box">
    <!-- 头部按钮 -->
    <div class="app-main-top-box">
      <div class="title">图文素材</div>
      <div>
        <el-button type="primary" size="medium" round @click="goAddMaterial()">新建图文素材</el-button>
      </div>
    </div>

    <!-- 有内容数据 -->
    <div class="material-content" v-if="list.length>0">
      <el-row :gutter="16">
        <el-col :span="8" v-for="(item, index) in list" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <i class="img-container" :style="{backgroundImage:'url(' + item.picUrl + ')'}"></i>
            <div style="padding: 10px;">
              <div class="title">{{item.title}}</div>
              <div class="content-footer">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                  <i class="el-icon-edit-outline" @click="editMaterialByID(item)"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <i class="el-icon-delete" @click="delMaterialByID(item.id)"></i>
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      ></pagination-direction>
    </div>

    <!-- 无内容数据区域 -->
    <div v-show="list.length===0" class="nothing">暂无素材</div>
  </div>
</template>

<script>
  import { delMaterialById, getMaterialList } from "@/api/wechat.js";
  export default {
    data() {
      return {
        // 配置
        //分页配置
        paginationConfig: {
          direction: "center", // 分页位置
          layout: "total, sizes, prev, pager, next, jumper", // 分页类型
          pageSizes: [9, 18, 30, 60], // 分页pages
          total: 0,
          page: 1, // 页数-默认1
          pageSize: 9 // 每页条数-默认10
        },
        // 数据
        list: []
      };
    },
    mounted() {
      this.initData();
    },
    methods: {
      /**
       * 获取数据
       */
      // 获取素材数据
      initData(
        page = this.paginationConfig.page,
        pageSize = this.paginationConfig.pageSize
      ) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        getMaterialList(params)
          .then(res => {
            this.list = res.data.list;
            this.paginationConfig.total = res.data.total;
            this.paginationConfig.page = res.data.pageNum;
          })
          .catch(err => {});
      },

      // 分页sizes改变
      sizesChange() {
        this.initData();
      },

      // 分页page改变
      pageChange() {
        this.initData();
      },

      /**
       *  按钮组
       */
      //根据ID编辑素材,跳转新增页面
      editMaterialByID(item) {
        this.$router.push({
          name: "PublicMaterialEdit",
          params: {
            material: item
          }
        });
      },

      //根据ID删除素材
      delMaterialByID(id) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
          roundButton: true
        })
          .then(() => {
            delMaterialById(id).then(res => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000,
                offset: 40
              });
            });
            this.materalList(this.currentPage);
          })
          .catch(() => {});
      },

      // 跳转到新增
      goAddMaterial() {
        this.$router.push({
          name: "PublicMaterialAdd"
        });
      }
    }
  };
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  .material-container {
    height: 100%;
    // 头部样式
    .material-header {
      padding: 10px;
      line-height: 40px;
      > span {
        float: left;
        font-size: 20px;
      }
      > .el-button {
        float: right;
      }
    }

    // 内容样式
    .material-content {
      width: 60%;
      min-width: 750px;
      margin: 20px auto;
      .el-row {
        .el-col {
          margin-bottom: 16px;
          .img-container {
            width: 100%;
            height: auto;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-color: #f6f8f9;
            padding-bottom: 56.25%;
            display: block;
          }
        }
        .title {
          text-align: center;
          margin-bottom: 5px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .content-footer {
          text-align: right;
        }
        i {
          font-size: 20px;
          margin-left: 5px;
        }
      }
      .el-pagination {
        margin-top: 15px;
      }
    }

    // 无内容提示
    .nothing {
      height: 200px;
      line-height: 200px;
      color: #999;
      text-align: center;
    }
  }
</style>
